<template>
  <div>
    <div class="current-left">
      <img v-for="(item, index) in unitList" :key="index" ref="my_img" :src="'http://localhost:8080' + item.unitSignature" @mousedown="start($event, index)" @mouseleave="leave($event, item, index)" :style="'width: 180px; height: 180px;' + img_style">
    </div>
    <div class="current-right">
      <iframe style="width: 600px; height: 400px" :src="pdfPath"></iframe >
    </div>
    <el-button :disabled="isOverHorizontal" style="margin-left: 900px; margin-top: 10px" type="primary" @click="signatureToPdf">确定</el-button>
  </div>
</template>

<script>

  import { signatureToPdf } from "../../../../api/county/credit";
  import { getSignatureByUnitName } from '../../../../api/manager/unit'

  export default {
    props: {
      pdfPath: String,
      current_creditId: Number
    },
    data() {
      return {
        isOverHorizontal: true, // 拖动签章是否超过水平 500
        imagPath: '',
        canDrag: false,
        x0:0,
        y0:0,
        x1:0,
        y1:0,
        img_style: '',
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          unitName: undefined,
        },
        unitList: [],
        unitId: ''
      }
    },
    mounted() {
      this.getList()
      this.isDown = false
    },
    // 监听x0的水平位置变化
    watch: {
        x0: {
          handler(newVal, oldValue) {
            if (newVal >= 500) {
              console.log('水平拖动距离已超过500,确定按钮可以点击!')
              this.isOverHorizontal = false
            } else {
              this.isOverHorizontal = true
            }
          },
          deep: true
        }
    },
    methods: {
      start(e, index){
        console.log(e)
        console.log(index)
        //鼠标左键点击
        this.canDrag=true;
        //记录鼠标指针位置
        this.x0=e.clientX;
        this.y0=e.clientY;
      },
      leave(e, item, index) {
        console.log(e)
        this.unitId = item.unitId
        if (this.canDrag === true) {
          this.x1=e.clientX;
          this.y1=e.clientY;
          let x=this.x1-this.x0;
          let y=this.y1-this.y0;
          const img = this.$refs.my_img[index]
          console.log(img)
          img.style=`margin-left:${img.offsetLeft+x}px;margin-top:${img.offsetTop+y}px;width: 180px; height: 180px;`;
          this.x0=this.x1;
          this.y0=this.y1;
          console.log('移动了' + this.x0 + "," + this.y0)
        }
        this.canDrag = false
      },
      getList() {
        this.loading = true;
        getSignatureByUnitName().then(res => {
          this.unitList = res.unitList
          this.total = res.unitList.length
        })
      },

      signatureToPdf() {
        console.log(this.current_creditId)
        var formData = new FormData();
        formData.append('creditId', this.current_creditId)
        formData.append('unitId', this.unitId)
        signatureToPdf(formData).then(res => {
          if (res) {
            console.log(res)
            this.msgSuccess('签章成功!')
            this.$emit('changeSignatureToPdf', res.uploadPdfWithSignaturePath)
          }
        })
      }
    }
  }
</script>

<style lang="less">
  .current-left {
    float: left;
    width: 400px;
    height: 400px;
    border: 1px solid;
    position: relative;
  }
  .current-right {
    float: left;
    width: 600px;
    height: 400px;
    border: 1px solid;
  }
</style>
